<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.js"></script>
</head>
<body>
<div id="test" style="width: 600px;height:500px;border:3px solid red">
    </div>
<script>
     var value=[0, 91, 524 , 6546, 183472];
        var yv=["活跃用户","新用户","连续活跃用户","回流用户","流失用户"];
        var sum =0;
        for (i=0;i<value.length;i++){
            sum += value[i];
        }
    var myChart = echarts.init(document.getElementById('test'));
    var option = {
        grid:{left:130,right:'20%',height:'60%',bottom:'20%'},
        title:{x:'left',y:'top',text:"标签人数分布",backgroundColor: 'white',subtext:sum +'人',itemGap:5,
            borderColor: 'white',borderWidth:2,itemGap:5,
            textStyle: {
                fontSize: 20,
                fontWeight: '10',
                color: 'black'
                    },
            subtextStyle: {fontSize: 15,
                        fontWeight: '10',
                        color: 'green'},
             },
            yAxis: {
            data: ["活跃用户","新用户","连续活跃用户","回流用户","流失用户"]
        },
        xAxis: {
            splitLine:{ show:false}  //改设置不显示坐标区域内的y轴分割线
        },
         tooltip : {
        trigger: 'item',
        formatter: function(params){
         	var series = option["series"];
//       	console.log(option["series"])
//       	console.log(series[0].data)
         	var arr=series[0].data;
			var sum =0
			for(var i=0;i<arr.length;i++){
			    sum=sum+arr[i];
			}
//			console.log(sum)
			//计算数组总和以及数组中单个数据的占比提取小数点后两位
        	return params.name + params.value+'人'+'\n'+'占比:'+(params.value/sum*100).toFixed(2) + '%';
        }
	},
        series: [{
            name: '用户',
            type: 'bar',
            data: [0, 91, 524 , 6546, 183472],
            //设置柱子的宽度
            barWidth : 20,
            //配置样式
            itemStyle: {
                //通常情况下：
                    normal:{
    　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['#3B9FFB','#5ECBCB','#65CB74','#FBD440','#ED5479','#9656E5','#752FCB'];
                        return colorList[params.dataIndex];
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter: function(params){
                            var series = option["series"];
                //       	console.log(option["series"])
                //       	console.log(series[0].data)
                            var arr=series[0].data;
                            var sum =0
                            for(var i=0;i<arr.length;i++){
                                sum=sum+arr[i];
                        }
            //			console.log(sum)
                        //计算数组总和以及数组中单个数据的占比提取小数点后两位
                        return params.name + params.value+'人'+'\n'+'占比:'+(params.value/sum*100).toFixed(2) + '%';
                        }
	                }　
                        //这是关键，在需要的地方加上就行了'{b}\n{c}%'
                    }
                },
                //鼠标悬停时：
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            ],
    　　　　　//控制边距　
        grid: {
                left: '0%',
                right:'10%',
                containLabel: true,
        }
    };
    myChart.setOption(option);
</script>
</body>
</html>